<template>
  <div>
    <div>
      <button @click="decrement(10)"> - </button>
      {{ count }} {{ doubleCount }}
      <button @click="increment(10)"> + </button>
      <button @click="asyncIncrement(1)">async +</button>
    </div>
    <Post></Post>
  </div>
</template>

<script>
  import Post from './views/Post.vue'
  import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
  export default {
    components: {
      Post,
    },

    data() {
      return {
        num: 2
      }
    },

    computed: {
      ...mapState(['count']),
      doubleCount() {
        return this.$store.getters.doubleCount(4)
      }
    },

    // computed: mapState({
    //   // counter: 'count',
    //   counter(state) {
    //     return state.count + this.num
    //   }
    // }),

    // computed: {
    //   count() {
    //     return this.$store.state.count
    //   },
    //   doubleCount() {
    //     return this.$store.getters.doubleCount
    //   }
    // },

    methods: {
      ...mapMutations(['decrement', 'increment']),
      ...mapActions(['asyncIncrement'])
      // asyncIncrement() {
      //   setTimeout(() => {
      //     this.$store.commit('increment')
      //   }, 1000)
      // }
    },
    
    mounted() {
      // this.$store.getters.doubleCount
      console.dir(mapState(['count']))
    }
  }
</script>

<style scoped>

</style>